import type { ColumnsType, TableProps } from 'antd/es/table';
import React, { createRef, useState, useEffect } from 'react';
import { Table, Button, Form, Input, Select, Col, Cascader, message, Row } from 'myselfantd';
import {
  updateThreshold,
  getDeviceList,
  getThresholdFieldList,
  getPage,
  getAlarmParamByCode,
} from '../api';
// import type { updateThresholdParams, getPageParams, getAlarmParamByCodeParams } from '../api';
interface DataType {
  code: number;
  name: string;
  type: string;
  value: number;
  unit: number;
  duration: number;
  remark: string;
  editable: boolean;
}
interface Props {
  data?: any;
  type?: any;
  title?: any;
  onFinish?: Function;
}
const columns: any = [
  {
    title: '序号',
    dataIndex: 'sortkey',
  },
  {
    title: '参数名称',
    dataIndex: 'code',
    showSorterTooltip: false,
    editable: true,
  },
  {
    title: '参数编号',
    dataIndex: 'type',
    showSorterTooltip: false,
    width: 180,
    editable: true,
  },
  {
    title: '参数值',
    dataIndex: 'value',
    showSorterTooltip: false,
    width: 180,
    editable: true,
  },
  {
    title: '参数单位',
    dataIndex: 'unit',
    showSorterTooltip: false,
  },
];
const App = ({ data, type, title, onFinish }: Props) => {
  let searchRef = createRef<any>();
  const [data1, setdata1] = useState([]);
  const initTemplate = { sortkey: 1, code: '', type: '', value: '', unit: '' };
  const [page1, setpage1] = useState({ total: 0, pageSize: 20, current: 1 });
  const [form] = Form.useForm();
  form.setFieldsValue({});
  useEffect(() => {
    form.setFieldsValue(data);
    // getThresholdFieldList({ id: data.id }).then((res) => {
    //   setdata1(res);
    //   page1.total = res.length;
    //   setpage1(page1);
    // });
    // let params: getAlarmParamByCodeParams = { machineTypeCode: data.machineTypeCode };
    // getAlarmParamByCode(params).then((res) => {
    //   setColumnsField([
    //     {
    //       name: 'code',
    //       placeholder: '工矿名称',
    //       type: 'select',
    //       options: res.map((item: any) => ({ value: item.code, unit: item.unit, name: item.name }))
    //     },
    //     {
    //       name: 'type',
    //       placeholder: '选择报警类型',
    //       type: 'select',
    //       options: [
    //         { value: 0, name: '等于阈值' },
    //         { value: 1, name: '小于阈值' },
    //         { value: 2, name: '大于阈值' }
    //       ]
    //     }
    //   ]);
    //   console.log(columnsField, 'columnsField');
    // });
  }, [data]);
  const [machineCode, setMachineCode] = useState('');
  const [deviceSpuId, setDeviceSpuId] = useState('');
  const [formColumns, setFormColumns] = useState([] as any);
  const [tempCode, setTempCode] = useState('');
  const [columnsField, setColumnsField] = useState([
    { code: 1, type: 1, value: 1, unit: 1 },
  ] as any);
  useEffect(() => {
    // getDeviceList({ category: 0 }).then((res) => {
    //   setFormColumns([
    //     {
    //       name: 'name',
    //       placeholder: '选择农机类型',
    //       disabled: true,
    //       options: res,
    //       defaultValue: data.machineTypeName,
    //     },
    //     {
    //       name: 'type',
    //       placeholder: '选择设备',
    //       disabled: true,
    //       defaultValue: data.machineName,
    //       options: [],
    //     },
    //   ]);
    // });
  }, []);
  useEffect(() => {
    if (deviceSpuId) {
      // let pageParams: getPageParams = {
      //   deviceSpuId: deviceSpuId,
      //   pageIndex: '1',
      //   pageSize: '20'
      // };
      // getPage(pageParams).then((res1) => {
      //   setFormColumns([
      //     {
      //       name: 'name',
      //       placeholder: '选择农机类型',
      //       disabled: true,
      //       options: [...formColumns[0].options]
      //     },
      //     {
      //       name: 'type',
      //       placeholder: '选择设备',
      //       disabled: true,
      //       options: res1.data
      //     }
      //   ]);
      //   let code: any = res1.data.find((item: any) => data.machineCode === item.code);
      //   console.log(code, 'code');
      //   setTempCode(code?.tempCode);
      // });
    }
  }, [deviceSpuId]);
  const [fields, setFields] = useState([] as any);
  const onChange: TableProps<DataType>['onChange'] = (data) => {
    setFields(data);
  };
  const handleSave = () => {
    if (!fields.length) {
      message.warning('阈值规则列表不能为空');
      return false;
    }

    // let params: updateThresholdParams = {
    //   fieldList: fields,
    //   id: data.id
    // };
    // updateThreshold(params).then((res) => {
    //   message.success('数据更新成功');
    //   onFinish && onFinish();
    // });
  };
  const handleFormFiledChange = (filed: any) => {
    setDeviceSpuId(filed.name[filed.name.length - 1]);
    setMachineCode(filed.type);
  };
  return (
    <>
      <div className={'myantd '} style={{ height: '30px', position: 'relative' }}>
        <h2>修改设备参数</h2>
      </div>
      <Form.Search
        type={'select'}
        columns={formColumns}
        onRef={searchRef}
        onChange={handleFormFiledChange}
      />
      <Table.Edit
        value={data1}
        initTemplate={initTemplate}
        page={page1}
        columns={columns}
        columnsField={columnsField}
        onChange={onChange}
      />
      <Row justify="end">
        <Button.Image type="primary" onClick={handleSave} icon={'search'}>
          查询
        </Button.Image>
        <Button.Image type="default" onClick={() => {}} icon={'refresh'}>
          重置
        </Button.Image>
      </Row>
    </>
  );
};

export default App;
